import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo')
        ),
        //body内容多抽离出去
        body: HomeContent()
      )
    );
  }
  
}

//body
class HomeContent extends StatelessWidget {

  Widget _getListData(context, index) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(listData[index]['imageUrl']),
            SizedBox(height: 15,),
            Text(
              listData[index]['title'],
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 20 
              ),
            )
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(
            color: Color.fromRGBO(233, 233, 233, 0.9),
            width: 1
          )
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      // crossAxisSpacing: 10.0, //水平子Widget之间的距离
      // mainAxisSpacing: 10.0, //垂直子Widget之间的距离
      // padding: EdgeInsets.all(10), //内边距
      // crossAxisCount: 2, //一行Widget数量
      // // childAspectRatio: 0.7, //宽度和高度的比例
      // children: this._getListData()
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0, //水平子Widget之间的距离
        mainAxisSpacing: 10.0, //垂直子Widget之间的距离
        crossAxisCount: 2, //一行Widget数量
      ),
      itemCount: listData.length,
      itemBuilder: this._getListData,
    );
  }
  
}